<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="学生心理健康服务平台">
				<view slot="center" class="navTitle">
					学生心理健康服务平台 
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView">
				<view class="loginBox">
					<view class="form">
						<view class="ft">
							家长注册账号
						</view>
						<view class="line">
							<view class="in">
								<input type="text" placeholder="请输入家长真实姓名" v-model="form.name" />
							</view>
						</view>
						<view class="line">
							<view class="in">
								<input type="text" placeholder="请选择学生所在学校" v-model="form.childSchool" />
							</view>
						</view>
						<view class="line">
							<view class="in">
								<input type="text" placeholder="请输入学生所在年级" v-model="form.childGrade" />
							</view>
						</view>
						<view class="line">
							<view class="in">
								<input type="text" placeholder="请输入学生所在班级" v-model="form.childClass" />
							</view>
						</view>
						<view class="line">
							<view class="in">
								<input type="text" placeholder="请输入学生真实姓名" v-model="form.childName" />
							</view>
						</view>
						<view class="line">
							<view class="in">
								<input type="text" placeholder="请输入手机号" v-model="form.phone" />
							</view>
						</view>
						<view class="line">
							<view class="in">
								<input type="text" placeholder="请输入验证码" v-model="form.code" />
							</view>
							<view class="getbtn" @tap="getCode" :class="isSending?'gray':''">
								{{isSending?(time+'s后重新获取'):'获取验证码'}}
							</view>
						</view>
						<view class="iaggree">
							<view class="icheck" :class="isAggree?'checked':''" @tap="isAggree=!isAggree">
								<image src="@/static/images/icon-gou.png" mode="aspectFit"></image>
							</view>
							<view class="p">
								我已阅读 <navigator url="" open-type="navigate" class="a">《用户协议》</navigator> 和 <navigator url="" open-type="" class="a">《隐私政策》</navigator>
							</view>
						</view>
						<view class="lineBtns">
							<view class="btn act" @tap="submit">
								注册
							</view>
						</view>
						<view class="other">
							<view class="l"></view>
							<view class="r">
								已有账号！  <navigator url="/subpage/student/login/login" class="a" open-type="navigate">去登录</navigator>
							</view>
						</view>
					</view>
					<view class="footTip">
						<view class="utip">
							<text>如遇登录问题请点击</text>
							<button type="default" open-type="contact" class="lineNav">联系客服</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAggree:false,
				isSending:false,
				timer:null,
				time:60,
				form:{
					name:'',
					childSchool:'',
					childGrade:'',
					childClass:'',
					childName:'',
					phone:'',
					code:''
				}
			}
		},
		methods: {
			submit(){
				const that=this;
				if(!that.form.name){
					that.$refs.uToast.show({
						message:'请输入家长真实姓名！',
						type:'warning',
						position: "top"
					});
					return;
				};
				if(!that.form.childSchool){
					that.$refs.uToast.show({
						message:'请选择学生所在学校！',
						type:'warning',
						position: "top"
					});
					return;
				};
				if(!that.form.childGrade){
					that.$refs.uToast.show({
						message:'请输入学生所在年级！',
						type:'warning',
						position: "top"
					});
					return;
				};
				if(!that.form.childClass){
					that.$refs.uToast.show({
						message:'请输入学生所在班级！',
						type:'warning',
						position: "top"
					});
					return;
				};
				if(!that.form.childName){
					that.$refs.uToast.show({
						message:'请输入学生真实姓名！',
						type:'warning',
						position: "top"
					});
					return;
				};
				if(!that.form.phone){
					that.$refs.uToast.show({
						message:'请输入手机号！',
						type:'warning',
						position: "top"
					});
					return;
				};
				if(!that.form.code){
					that.$refs.uToast.show({
						message:'请输入验证码！',
						type:'warning',
						position: "top"
					});
					return;
				};
				console.log(this.form)
			},
			getCode(){
				const that=this;
				if(!that.form.phone){
					that.$refs.uToast.show({
						message:'请输入手机号！',
						type:'warning',
						position: "top"
					});
					return;
				};
				if(that.isSending){return};
				that.isSending=true;
				//ajax
				that.timer=setInterval(function(){
					if(that.time>1){
						that.time--;
					}else{
						that.isSending=false;
						clearInterval(that.timer);
						that.timer=null;
						that.time=60;
					}
				},1000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginBox{
		min-height: 100%;
		display: flex;
		padding: 40rpx 70rpx 60rpx;
		box-sizing: border-box;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		.form{
			width: 100%;
			flex: 1 1 auto;
			padding-bottom: 40rpx;
			.ft{
				text-align: center;
				font-size: 36rpx;
				color: #65554d;
				margin-bottom: 40rpx;
			}
			.line{
				display: flex;
				margin-bottom: 24rpx;
				background: #fff;
				height: 90rpx;
				align-items: center;
				border-radius: 90rpx;
				.ico{
					flex: 0 0 auto;
					width: 80rpx;
					text-align: center;
					image{
						width: 24rpx;
						height: auto;
						display: block;
						margin: auto;
					}
				}
				.in{
					flex: 1 1 auto;
					overflow: hidden;
					input{
						width: 100%;
						height: 90rpx;
						display: block;
						font-size: 24rpx;
						background: none !important;
						border: none !important;
						outline: none !important;
						padding: 0 30rpx;
						box-sizing: border-box;
					}
				}
				.getbtn{
					line-height: 80rpx;
					background: #ffebd4;
					color: #fe9c29;
					padding: 0 26rpx;
					border-radius: 80rpx;
					font-size: 24rpx;
					margin-right: 5rpx;
					flex: 0 0 auto;
					&.gray{
						background: none;
						color: #999;
					}
				}
				.btn{
					flex: 0 0 auto;
					width: 100rpx;
					text-align: center;
					image{
						width: 40rpx;
						display: block;
						margin: auto;
						height: auto;
					}
				}
			}
			.lineBtns{
				margin-top: 80rpx;
				.btn{
					display: block;
					line-height: 88rpx;
					border: 1rpx solid #65554d;
					border-radius: 90rpx;
					text-align: center;
					font-size: 28rpx;
					margin-bottom: 10rpx;
					&.act{
						border-color: #fe9c29;
						background: #fe9c29;
						color: #fff;
					}
				}
			}
			.other{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #897f7a;
				navigator{
					display: inline;
					padding: 0 !important;
					margin: 0 !important;
					border: none !important;
					opacity: 1 !important;
					outline: none !important;
					background: transparent !important;
					line-height: inherit;
					overflow: visible;
					height: auto !important;
					font-size: inherit !important; 
					&.a{
						color: #fe9c29;
						text-decoration: underline;
						margin-left: 10rpx !important;
					}
				}
			}
		}
	}
</style>
